<template>
  <div class="boxContent">
   <el-form  class="formDate" label-position="top" :model="formDate">
    <el-row style="margin-left: 30px;padding-top: 15px;">
      <el-col :span="6">
       <el-form-item label="字典名称">
          <el-input placeholder="请输入" style="width:244px;" v-model="formDate.dictNaeme" size="large"></el-input>
       </el-form-item>
      </el-col>
      <el-col :span="6">
       <el-form-item label="字典类型">
          <el-input placeholder="请输入" style="width: 244px;" v-model="formDate.dictType" size="large"></el-input>
       </el-form-item>
      </el-col>
      <el-col :span="6">
       <el-form-item label="状态" prop="status">
           <el-select placeholder="请选择" style="width: 244px;" size="large" v-model="formDate.status">
             <el-option label="启用" :value="0" />
             <el-option label="停用" :value="1" />
           </el-select>
       </el-form-item>
      </el-col>
      <el-col :span="6">
       <el-form-item label="创建时间" prop="dates">
           <el-date-picker
           v-model="form.dates"
           type="daterange"
       range-separator="—"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       size="large"
     />
       </el-form-item>
      </el-col>
    </el-row>
    <el-row class="addDepart">
       <el-button type="primary" style="border-radius: 20px;width: 80px;" @click="SearchDate">搜索</el-button>
       <el-button type="info" style="border-radius: 20px;width: 80px;" @click="resetForm">重置</el-button>
    </el-row>
    <el-row class="btnFlex">
      <el-col :span="16" style="padding-left: 20px;">
       <p >已选12项</p>
      </el-col>
      <el-col :span="8" style="padding-top: 15px;">
       <el-form-item >
        <el-button  type="primary" style="border-radius: 20px;width: 80px;" @click="newAdd('add')">新增</el-button>
        <el-button  type="info" style="border-radius: 20px;width: 80px;" >删除</el-button>
        <el-button  type="info" style="border-radius: 20px;width: 80px;" @click="exportDiction">导出</el-button>
        <el-button  type="info" style="border-radius: 20px;width: 80px;" disabled="true">清理缓存</el-button>
       </el-form-item>
     </el-col>
    </el-row>
   </el-form>
   <el-table
   ref="multipleTableRef"
   :data="list"
   style="width: 100%"
   @selection-change="handleSelectionChange"
  >
   <el-table-column type="selection" width="55" />
   <el-table-column label="字典编号" width="120" prop="dictId"/>
   <el-table-column prop="dictName" label="字典名称" width="120" />
   <el-table-column prop="dictType" label="字典类型"  />
   <el-table-column prop="status" label="状态">
    <template v-slot="{row}">
      <span>{{ row.status===0?'启用':'停用'}}</span>
    </template>
    </el-table-column>
   <el-table-column prop="remark" label="备注"  />
   <el-table-column prop="createTime" label="创建时间"  />
   <el-table-column  label="操作">
       <template v-slot="{ row }">
         <el-button type="text"  @click="newAdd('emit',row.dictId)">修改</el-button>
         <el-button type="text" @click="delDiction(row.dictId)">删除</el-button>
      </template>
   </el-table-column>
 </el-table>
 <el-row type="flex" justify="end" align="middle" style="height: 60px;">
   <el-pagination
    :total="pageParams.total"
    :current-page="pageParams.pageNum"
    :page-size="pageParams.pageSize"
    @current-change="changePage"
   />
 </el-row>
 <el-dialog :title="showTitle" v-model="showDialog">
   <el-divider style="margin-top: -10px;"/>
   <el-form label-position="top" :model="formDate" :rules="rules">
    <el-row style="margin-left: 20px;">
      <el-col :span="12">
       <el-form-item label="字典名称" prop="dictName">
       <el-input placeholder="请输入字典名称" style="width:230px;background-color: #f9f9f9;" v-model="formDate.dictName" ></el-input>
     </el-form-item>
     </el-col>
     <el-col :span="12">
       <el-form-item label="字典类型" size="mini" prop="dictType">
       <el-input placeholder="请输入字典类型" style="width:230px;background-color: #f9f9f9;" v-model="formDate.dictType"></el-input>
     </el-form-item>
     </el-col>
    </el-row>
   <el-row>
     <span style="margin-left: 20px;padding-bottom:10px;">状态</span>
   </el-row>
   <el-row style="margin-left: 20px;">
     <el-radio-group v-model="radio" >
     <el-radio :label="3">正常</el-radio>
     <el-radio >停用</el-radio>
    </el-radio-group>
   </el-row>
   <el-row style="margin-top: 20px;">
     <el-col >
       <el-form-item label="备注" style="margin-left: 20px;" prop="remark">
         <el-input type="textarea" placeholder="请输入内容" v-model="formDate.remark"/>
       </el-form-item>
     </el-col>
   </el-row>
   <el-row>
     <el-col>
       <el-button type="info" @click="btnCancel">取消</el-button>
       <el-button type="primary" @click="btnOk">确定</el-button>
     </el-col>
   </el-row>
   </el-form>
 </el-dialog>
  </div>
 </template>
 <script setup>
 import {ref,onMounted} from "vue";
 import {getDictionary,delDictionary,exportDictionary,viewDictionary,emitDictionary,newDictionary} from "@/api/dictionary"
 import { ElMessageBox, ElMessage } from 'element-plus'
 import FileSaver from 'file-saver'
 const showDialog = ref(false)  //设置弹层
 const radio=ref(3)  //弹层中的单选按钮
 const formDate=ref({
 dictName:'',   //字典名称
 dictType:'',    //字典类型
 status:0,      //字典状态
 pageNum:1,      //当前页
 pageSize:10,     //每页多少条
 beginCreateTime:'',  //开始时间
 endCreateTime:'',   //结束时间
 remark:'',   //备注
 createTime:'',
 dictId:'',
 })
 // 弹层表单校验
 const rules=ref({
   dictName:[
     {required: true, message: '字典名称不能为空', trigger: 'blur'}
   ],
   dictType:[
   {required: true, message: '字典类型不能为空', trigger: 'blur'}
   ],
   remark:[
    {required: true, message: '备注内容不能为空', trigger: 'blur'}
   ]
 })
 //时间选择
 const form=ref({
   dates: []
 })
 //分页功能
 const pageParams=ref({
   pageNum:1,
   pageSize:10,
   total:0
 })
 const changePage=async(newPage)=>{
   pageParams.value.pageNum=newPage
   await getDictionary()
 }
 //重置表单
 const resetForm=()=>{
   formDate.value.dictNaeme='',
   formDate.value.dictType='',
   formDate.value.status=''
 }
 //列表渲染
 const getDictionaryAPI=async()=>{
 const res=await getDictionary(formDate.value)
 console.log(res);
 list.value=res.data.records
 }
 const list=ref([])
 onMounted(()=>{
   getDictionaryAPI()
 })
 //实现搜索功能
 const SearchDate= async()=>{
  const res = await getDictionary(formDate.value)
  list.value=res.data.records

 }
 //删除功能
 const delDiction=(id)=>{
  // console.log(id)
   ElMessageBox.confirm('确定删除该数据吗？').then(async()=>{
     await delDictionary(id)
     ElMessage.success('删除成功')
    getDictionaryAPI()
   })
 }
 //编辑回显
 const showTitle=ref('')
 const newAdd=async(type,id)=>{
  if(type==='add'){
    showTitle.value='添加字典类型'
  }else if(type==='emit'){
    showTitle.value='修改字典类型'
    const data=await viewDictionary(id)
    formDate.value=data.data
  }
   showDialog.value=true
 }
 //取消关闭弹层
 const btnCancel=()=>{
  showDialog.value=false
 }
 //编辑新增
 const btnOk=async()=>{
  if(formDate.value.dictId){
    await emitDictionary(formDate.value)
  }else{
   await newDictionary(formDate.value)
    
  }
  getDictionaryAPI()
  showDialog.value=false
 }
 //导出文件
 const exportDiction=async()=>{
  const result=await exportDictionary()
  console.log(result);
  FileSaver.saveAs(result,'字典信息表.xlsx')
 }
 </script>
 
 <style scoped lang="scss">
 .box{
   background-color: #ffffff;
 }
 .boxContent{
   width: 1450px;
   height: 100%;
 }
 .addDepart{
   display: flex;
   flex-wrap: wrap;
   justify-content: end;
   position: relative;
   box-sizing: border-box;
   margin-top: 25px;
   margin-right: 140px;
   padding-bottom: 30px;
 }
 .btnFlex{
   display: flex;
   background-color: #f9f9f9;
   height: 80px;
   align-items: center;
 }
 </style>